import { reactive, computed } from "vue";

export default () => {
  const positionList = reactive({
    is_show_mask: false,
    box_screen_left: 0,
    box_screen_top: 0,
    start_x: 0,
    start_y: 0,
    end_x: 0,
    end_y: 0,
    scale: 1,
  });
  const mask_width = computed(() => {
    return Math.abs(positionList.end_x - positionList.start_x);
  });
  const mask_height = computed(() => {
    return Math.abs(positionList.end_y - positionList.start_y);
  });
  const mask_left = computed(() => {
    return (
      (Math.min(positionList.start_x, positionList.end_x) -
        positionList.box_screen_left) /
      positionList.scale
    );
  });
  const mask_top = computed(() => {
    return (
      (Math.min(positionList.start_y, positionList.end_y) -
        positionList.box_screen_top) /
      positionList.scale
    );
  });
  function handleMouseMove(event) {
    positionList.end_x = event.clientX;
    positionList.end_y = event.clientY;
  }

  return {
    positionList,
    mask_width,
    mask_height,
    mask_left,
    mask_top,
    handleMouseMove,
  };
};
